<template>
    <div class="wrapper">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片区域 -->
        <el-card>
            <el-row>
                <el-input class="inputSize" placeholder="请输入商品名称" v-model="searchValue">
                    <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                </el-input>
                <el-button class="addCommodity" type="primary" @click="add_commodity">添加商品</el-button>
            </el-row>
            <!-- 表格区域 -->
            <el-table
                v-loading='goods_list_data.loading'
                element-loading-spinner="el-icon-loading"
                element-loading-text="拼命加载中"
                :data="goods_list_data.goods"
                style="width: 100%"
                border>
                <el-table-column
                    type="index"
                    label="序号"
                    width="90">
                </el-table-column>
                <el-table-column
                    prop="goods_name"
                    label="商品名称"
                    width="400">
                </el-table-column>
                <el-table-column
                    prop="goods_price"
                    label="商品价格(元)">
                </el-table-column>
                <el-table-column
                    prop="goods_weight"
                    label="商品重量">
                </el-table-column>
                <el-table-column
                    label="创建时间">
                    <template v-slot="scope">
                        {{handler_time(scope.row.add_time)}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200">
                    <template v-slot="scope">
                        <el-button size="small" type="primary" icon="el-icon-edit" @click="edit_commodity(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" icon="el-icon-delete" @click="delete_commodity(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页功能 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="goods_params.pagenum"
                :page-sizes="[10, 50, 500, 1000]"
                :page-size="goods_params.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="goods_list_data.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import dayjs from 'dayjs'
    export default {
        name: "Goods",
        data() {
            return {
                // 获取商品参数
                goods_params: {
                    query: '',
                    pagenum: 1,
                    pagesize: 10
                },
                // 商品列表数据
                goods_list_data: {
                    goods: [],
                    total: 0,
                    pagenum: 1,
                    loading: true
                },
                searchValue: '',
                clearTime: null
            }
        },
        created() {
            this.get_goods_list_data();
        },
        methods: {
            // 获取商品列表
            async get_goods_list_data() {
                let {data: res}  = await this.$http.get('/goods', {
                    params: this.goods_params
                });
                if(res.meta.status !== 200) return this.$message.error('获取商品列表失败');
                this.goods_list_data.goods = res.data.goods;
                this.goods_list_data.total = res.data.total;
                this.goods_list_data.pagenum = res.data.pagenum;
                this.goods_list_data.loading = false
            },
            // 处理时间
            handler_time(time) {
                return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
            },
            // 搜索商品
            search() {
                this.goods_params.query = this.searchValue;
                this.get_goods_list_data();
                this.searchValue = '';
            },
            // 分页功能
            handleSizeChange(value) {
                this.goods_params.pagesize = value;
                this.get_goods_list_data();
            },
            handleCurrentChange(value) {
                this.goods_params.pagenum = value;
                this.get_goods_list_data();
            },
            // 添加商品,点击跳转到添加商品组件
            add_commodity() {
                this.$router.push({name: 'add'})
            },

            // 编辑商品
            async edit_commodity({goods_id}) {
                this.$router.push({name: 'edit', params: {
                    id: goods_id
                }});
            },

            // 删除商品
            async delete_commodity(row) {
                const {data: res} = await this.$http.delete(`goods/${row.goods_id}`);
                if(res.meta.status !== 200) return this.$message.error('删除商品失败');
                this.$message.success('删除商品成功');
                this.get_goods_list_data();
            }
        }
    };
</script>

<style lang='less' scoped>
    .wrapper{
        width: 100%;
        height: 0px;
        padding: 10px 20px;
        box-sizing: border-box;
        .inputSize{
            width: 350px;
        }
        .addCommodity{
            margin-left: 30px;
        }
    }
</style>